<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>任务一：表单（一）单个表单项的校验</title>
	<style type="text/css">
		#jobs{
			display: none;
		}
	</style>
</head>
<body>
	<div id="login" class="login">
		<span id="isStudent">在校生</span>
		<input id="zai" type="radio" value="0" name="type" checked="true">     <!-- 将radio按钮的name设置成一样，非他及他   设置参照物-->
		<span id="noStudent">非在校生</span>
		<input id="buzai" type="radio" value="1" name="type">
		<div id="schools">
			<span>学校</span>
				<select name="city" id="city">
				</select>
				<select name="school" id="school">
				</select>
		</div>
		<div id="jobs">
			<label id="jobName">
				<span>就业单位</span>
				<input type="text" name="">
			</label>
		</div>
	</div>
	<script>
		function $ (s) {
			return document.querySelector(s)      //普通函数，返回querySelector(),完成类似jquery对DOM的操作
		}

		// //切换表单
		// function reset() {
		// 	$('#zai').checked=false;
		// 	$('#buzai').checked=false
		// }

		// $('#zai').onclick = function() {
		// 	reset();
		// 	this.checked = true;
		// 	$('#schools').style.display = "block";
		// 	$('#jobs').style.display = "none";
		// }

		// $('#buzai').onclick = function() {
		// 	reset();
		// 	this.checked = true;
		// 	$('#schools').style.display = "none";
		// 	$('#jobs').style.display = "block";
		// }



		//创建新元素
		function createOption(value,text) {                           //参数为学校序列号，学校名称；
			var option = document.createElement('option')     // 插入元素
			option.value = value;
			option.innerText = text;							//插入文本
			return option;
		}

		//初始化城市  
		function init(data) {
			var citySelect = $('#city');
			const schoolSelect = $('#school')
			var city = ''
			for(var city in data) {
				citySelect.appendChild(createOption(city,city))     //初始化城市的下拉框
			}
			renderSchool(data)
		}

		function renderSchool(data) {     //参数为包含城市 大学 的对象
			var city = $('#city').value;
			const schoolSelect = $('#school')
			//清空所有选项
			//console.log(schoolSelect.options.length)
			schoolSelect.options.length = 0

			let schoolAry = data[city];  
			//console.log(schoolAry) //school[city.value]
			schoolAry.forEach( function(school,index){
				return schoolSelect.appendChild( createOption(index,school) )
			})
		}

		(function() {
			var schools = {
				'北京': ['北京大学','北京大学'],
				'上海': ['上海交通大学','上海科技大学'],
				'长沙': ['长沙理工','中南大学']
			}
			var table = {
				0:'#schools',
				1:'#jobs'
			}



			var currentState = 0;                                                  //设置一个参照坐标,后面所有value值都以这个为中心，真的是编程思想哦
			Array.from(document.querySelectorAll('input[type = radio]')).forEach( function(input) {   //获取这种方式有助于当input特别多时，可以当作模板来使用
				return input.onclick = function(event) {
					var value = event.target.value;
					if ( value=== currentState ) {
						return
					}
					$(table[currentState]).style.display = 'none'
					currentState = value
					$(table[currentState]).style.display= 'block'
				}
			})

			init(schools)

			$('#city').onchange = function (event) {
				renderSchool(schools)
			}
		}())
	</script>
</body>
</html>